<template>
  <div class="performanceRApproval-box">
    <nav-title title="绩效结果审批" routerLink=""/>
    <div class="search">
      <input class="search-input" type="text" placeholder="请输入搜索关键字" v-model="querykey">
      <img class="search-img" src="../schedule/images/search.png" alt="" @click="getList">
    </div>
    <h2>{{allInfo.title}}</h2>
    <ul>
      <li v-for="(item, index) in allInfo.pers" @click="goToApprove(item.docid, item.version, item.seqnbr, item.epPhase)">
        <div class="neirong"  @click="">
          <div class="information">
            <p><span>{{item.name}}</span> | <span>{{item.emplid}}</span></p>
            <p>{{item.dept}}</p>
            <p>{{item.jobDescr}}</p>
            <p>
              <span>排名：{{item.ranking}}</span>
              <span>得分：{{item.score}}</span>
            </p>
          </div>
        </div>
      </li>
    </ul>
    <button @click="submit" v-if="!type">提交</button>
  </div>
</template>

<script>
import {
  getPerresultapproveList,
  perresultapproveCommitResult
} from "../../api/api";
import qs from "qs";

export default {
  name: "PerformanceRApproval",
  components: {},
  created() {
    this.type = this.$route.query.type;
    this.cTransactionNbr = this.$route.query.cTransactionNbr;
  },
  mounted() {
    this.getList();
  },
  data() {
    return {
      querykey: "",
      cTransactionNbr: "",
      allInfo: {
        // title: '2018年03月 | 集团总部员工PPI考核模板 人力资源中心S级排名组',
        // list: [
        //   {
        //     name: '大撒大撒',
        //     emplid: 'XC1000001',
        //     dept: '奥克斯控股 - 人力资源中心',
        //     jobDescr: '高级招聘专员',
        //     ranking: '2/6',
        //     score: '96',
        //   },
        //   {
        //     name: '大撒大撒',
        //     emplid: 'XC1000001',
        //     dept: '奥克斯控股 - 人力资源中心',
        //     jobDescr: '高级招聘专员',
        //     ranking: '2/6',
        //     score: '96',
        //   }
        // ],
      }
    };
  },
  methods: {
    getList() {
      this.$vux.loading.show();
      let params = {
        cTransactionNbr: this.cTransactionNbr,
        queryKey: this.querykey
      };
      getPerresultapproveList(params)
        .then(res => {
          this.$vux.loading.hide();
          if (res && res.retCode === "000000") {
            this.allInfo = res.retData;
          } else {
            this.$vux.alert.show({
              title: "提示",
              content: res.retMsg
            });
          }
        })
        .catch(res => {
          this.$vux.loading.hide();
          this.$vux.alert.show({
            title: "警告",
            content: "网络异常，请稍后重试"
          });
        });
    },
    goToApprove(docid, version, seqnbr, epPhase) {
      // console.debug(oprid, docid, sheetid);
      this.$router.push({
        name: "PerformanceRApprovalDetail",
        query: {
          cTransactionNbr: this.cTransactionNbr,
          docid,
          version,
          seqnbr,
          epPhase,
          wfType: "EPRS"
        }
      });
    },
    submit() {
      let params = {
        cTransactionNbr: this.cTransactionNbr
      };
      this.$vux.confirm.show({
        title: "提示",
        content: "您确认要提交？",
        onConfirm: () => {
          this.$vux.loading.show();
          perresultapproveCommitResult(qs.stringify(params))
            .then(res => {
              this.$vux.loading.hide();
              if (res && res.retCode === "000000") {
                    this.$router.push("/todoList/todo");
              } else {
                this.$vux.alert.show({
                  title: "提示",
                  content: res.retMsg
                });
              }
            })
            .catch(res => {
              this.$vux.loading.hide();
              this.$vux.alert.show({
                title: "警告",
                content: "网络异常，请稍后重试"
              });
            });
        }
      });
    }
  }
};
</script>

<style type="text/scss" lang="scss" scoped>
.performanceRApproval-box {
  > button {
    width: 90%;
    height: 40px;
    line-height: 40px;
    border-radius: 8px;
    font-size: 18px;
    color: #fff;
    outline: none;
    margin-bottom: 50px;
    background-color: rgba(28, 170, 254, 1);
    font-weight: bold;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.349019607843137);
    margin-top: 10px;
  }
  > h2 {
    text-align: left;
    padding: 10px;
    font-size: 16px;
    background-color: rgb(242, 242, 242);
  }
  .search {
    position: relative;
    .search-input {
      display: inline-block;
      height: 30px;
      line-height: 30px;
      width: 90%;
      margin: 8px 0;
      padding-left: 5px;
      text-align: left;
      border-radius: 3px;
      border: 2px solid #f5f5f5 !important;
    }
    .search-img {
      position: absolute;
      top: 11px;
      right: 5%;
      margin-right: 10px;
    }
  }

  ul {
    margin: 0;
    padding: 0;
    text-align: left;
    padding: 4px;
    li {
      height: 100%;
      clear: both;
      padding: 10px;
      border: 1px solid #eee;
      margin-bottom: 4px;
      .neirong {
        display: flex;
        .information {
          flex: 1;
          p {
            line-height: 24px;
            &:first-child {
              font-weight: bold;
            }
          }
          p:last-child {
            color: #f00;
            text-align: right;
            > span {
              &:first-child {
                float: left;
              }
            }
          }
        }
        .operation {
          .process-img {
            width: 60px;
            height: 54px;
          }
        }
      }
    }
  }
}
</style>
